<template>
  <div class="app-container">
    <div class="theme-main-container">
      <div class="filter-container">
        <element-base-info
          :id-edit-disabled="idEditDisabled"
          :business-object="elementBusinessObject"
          :base-element="element"
          :type="elementType" />
        <flow-condition
          ref="flowConditionRef"
          style="margin-top: 16px"
          :business-object="elementBusinessObject"
          :cond-element="element" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'ConditionPerties' })
import { ref, reactive, computed, onMounted, watch, nextTick, onBeforeMount } from 'vue'
import FlowCondition from "@b/package/penal/flow-condition/FlowCondition.vue";
import ElementBaseInfo from "@b/package/penal/base/ElementBaseInfo.vue";
import { cloneDeep } from 'lodash'

const props = defineProps<{
  businessObject: Object,
  element: Object,
  condModeler: Object,
}>()

const emits = defineEmits([''])
const flowConditionRef = ref()
const idEditDisabled = ref<boolean>(true)
const elementType = ref<string>("")
const elementBusinessObject = ref({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用

watch(()  => props.businessObject, (nval, oval) => {
  if (nval) {
    nextTick(() => resetBaseInfo());
  }
}, { immediate: true })

onBeforeMount(() => {
  proInit()
})

const resetBaseInfo = () => {
  elementBusinessObject.value = cloneDeep(props.element.businessObject);
}

function proInit() {
  window.bpmnInstances = {
    modeler: props.condModeler,
    modeling: props.condModeler.get("modeling"),
    moddle: props.condModeler.get("moddle"),
    eventBus: props.condModeler.get("eventBus"),
    bpmnFactory: props.condModeler.get("bpmnFactory"),
    elementFactory: props.condModeler.get("elementFactory"),
    elementRegistry: props.condModeler.get("elementRegistry"),
    replace: props.condModeler.get("replace"),
    selection: props.condModeler.get("selection"),
  };
}

async function save() {
  return await flowConditionRef.value.save();
}

defineExpose({
  save
})
</script>

<style scoped></style>
